<template>
  <div>
    <el-container>
      <el-header class="inside-header">
        <div>
          <!-- 面包屑 -->
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>出入审核</el-breadcrumb-item>
            <el-breadcrumb-item class="breadcrumbColor">过车记录补登</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-header>
      <el-main>
        <div>
          <el-row style="height: 80px">
              <el-col :span="5" style="margin-left: 20px">
              <el-form-item label="出入时间" size="small">
                <el-date-picker clearable v-model="form.startDateTime" type="date" placeholder="选择时间" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <span>-</span>
            <el-col :span="4">
              <el-form-item label="" size="small">
                <el-date-picker clearable v-model="form.endDateTime" type="date" placeholder="选择时间" style="width: 92%"/>
              </el-form-item>
            </el-col>
             <el-col :span="4" style="margin-left: 5px">
              <el-form-item label="车牌号" size="small">
                <el-input clearable v-model="form.cl_cph" maxLength="8" placeholder="请输入车牌号" />
              </el-form-item>
            </el-col>
               <el-col :span="4" style="margin-left: 10px">
              <el-form-item label="货物" size="small">
                <el-input clearable v-model="form.cargo_type" placeholder="请输入货物" />
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left: 10px">
              <el-form-item label="运输量" size="small">
                <el-input clearable v-model="form.cl_huowushuliang" placeholder="请输入运输量" />
              </el-form-item>
            </el-col>
           <el-col :span="5" style="margin-left: 20px">
              <el-form-item label="出入类型" size="small">
                 <el-select clearable v-model="form.typeOfAcces" style="width:250px" placeholder="请选择">
                  <el-option label="入厂" value="入厂" />
                  <el-option label="出厂" value="出厂" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="margin-left: 20px">
              <el-button size="small" class="sele-but" icon="search" @click="selectQuery">查询</el-button>
              <el-button size="small" class="empty-but" icon="refresh" @click="onReset">重置</el-button>
              <el-button type="danger" plain size="small" icon="delete" @click="deleteAll">删除</el-button>
              <el-button size="small" icon="download" class="empty-but" @click="exportExcelData(form)">导出</el-button>
            </el-col>
        </el-row>
        </div>
         <div style="height: 10px; display: flex; align-items: center;background:#f2f4f5;margin:0 -19.5px 0 -20px">
         <!--
          <el-button size="small" icon="plus" class="add-but" @click="filingDialog = true">车辆备案</el-button>
          <el-button size="small" class="empty-but" icon="upload" @click="dialogTableVisible = true">导入</el-button>
          -->
          </div>
        <div>
          <el-table ref="multipleTableRef" :data="tableData"  style="width: 100%;" height="460" @selection-change="handleSelectionChange">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="序号" type="index" width="50"/>
             <!--<el-table-column align="center" prop="register.filingStatus" label="是否补登" width="120">
               <template #default="scope">
                <span v-if="scope.row.register.filingStatus == 1">已补登</span>
                <span v-if="scope.row.register.filingStatus == 0">未补登</span>
             </template>
             </el-table-column>
             -->
            <el-table-column align="center" prop="typeOfAcces" label="出入类型"  show-overflow-tooltip/>
            <el-table-column align="center" prop="gateno" label="道闸编号"  show-overflow-tooltip/>
            <el-table-column align="center" prop="accessTime" label="出入时间"  show-overflow-tooltip
             :formatter="function(row,column){ if(row.accessTime){ return $moment(row.accessTime).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}" />
            <el-table-column align="center" prop="cl_cph" label="车牌号" show-overflow-tooltip/>
            <el-table-column align="center" prop="licensePlateColor" label="车牌颜色" show-overflow-tooltip />
        <!--
            <el-table-column align="center" prop="sj_name" label="司机" show-overflow-tooltip />
            <el-table-column align="center" prop="vehicleMessage.sj_phone" label="司机电话" width="200px" show-overflow-tooltip />
            <el-table-column align="center" prop="register.cargo_type" label="运输货物" width="200px" show-overflow-tooltip />
            <el-table-column align="center" prop="register.cl_huowushuliang" label="运输量/吨" width="200px" show-overflow-tooltip />
          · <el-table-column align="center" prop="register.implementationinstructions" label="执行说明" width="120" show-overflow-tooltip/>
            <el-table-column align="center" prop="applicant" label="申请人" show-overflow-tooltip />
            -->
            <el-table-column align="center" prop="applicationTime" label="申请时间" show-overflow-tooltip
            :formatter="function(row,column){ if(row.applicationTime){ return $moment(row.applicationTime).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}" />
            <el-table-column align="center" prop="viewphotos" label="抓拍照片" show-overflow-tooltip>
               <template #default="scope">
                    <el-button v-if="scope.row.viewphotos==''||scope.row.viewphotos== null" link type="primary" size="small">未上传
                    </el-button>
                    <el-button  v-else type="primary" size="small" link @click="acclist(scope.row)">查看照片
                    </el-button>
              </template>
            </el-table-column>
             <el-table-column align="center" fixed="right" label="操作" width="200" >
              <template #default="scope">
                <!--<el-button link type="primary" size="small" @click="filingStatus(scope.row)">车辆备案</el-button> -->
                <!--<el-button  link type="primary" size="small" icon="edit" @click="updateDetail(scope.row)" >过车记录补登</el-button>-->
                <el-button  link type="primary" size="small" icon="edit" @click="UpdatePage(scope.row)" >过车记录补登</el-button>
                <!--<el-button link type="danger" size="small" icon="delete" @click="deleteRow(scope.row)">删除</el-button>-->
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="margin-right:40px; display: flex; justify-content: flex-end"  v-model:current-page="queryInfo.pagenum" v-model:page-size="queryInfo.pagesize"
                         size="small"  layout="prev, pager, next, jumper,total"
           :total="queryInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
      </el-main>
    </el-container>
     <!--单条备案车辆弹窗-->
     <!--
    <el-dialog v-model="filingDialogOne" title="是否备案" center width="40%">
      <el-form ref="ruleFormRef" :model="formData" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-radio-group v-model="formData.register.filing" @change="setFilingOne">
            <el-radio label="是" />
            <el-radio label="否" />
      </el-radio-group>
      </el-form>
          <template #footer>
        <span class="dialog-footer">
          <el-button class="sele-but" @click="filingOne(formData)"> 确定 </el-button>
          <el-button class="empty-but" @click="filingDialogOne = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    -->
    <!--多条备案车辆弹窗-->
    <!--
    <el-dialog v-model="filingDialog" title="是否备案" center width="40%">
      <el-form ref="ruleFormRef" :model="formData" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-radio-group v-model="formData.register.filing" @change="setFiling">
            <el-radio label="是" />
            <el-radio label="否" />
      </el-radio-group>
      </el-form>
          <template #footer>
        <span class="dialog-footer">
          <el-button class="sele-but" @click="filing(formData)"> 确定 </el-button>
          <el-button class="empty-but" @click="filingDialog = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    -->
    <!--修改弹出框-->
 <!--   <el-dialog v-model="updateDialog" title="补登信息" width="40%">
    <div style="width: 80%">
        <el-form  ref="ruleFormRef" :model="obj" status-icon :rules="rules" label-width="180px" class="demo-ruleForm">
             <el-form-item label="出入类型"  prop="typeOfAcces">
                 <el-select clearable v-model="obj.typeOfAcces" style="width:300px" placeholder="请选择">
                  <el-option label="入厂" value="入厂" />
                  <el-option label="出厂" value="出厂" />
                </el-select>
              </el-form-item>
              <el-form-item label="道闸编号"  prop="gateno">
                 <el-select clearable v-model="obj.gateno" style="width:300px" placeholder="请选择">
                      <el-option v-for="item in getInfo.getInfoData" :key="item.id" :lable="item.monitorName" :value="item.monitorName"/>
                </el-select>
              </el-form-item>
            <el-form-item label="车牌号"  prop="cl_cph">
                <el-input clearable v-model="obj.cl_cph" style="width:300px" placeholder="请输入" autocomplete="off" />
            </el-form-item>
            <el-form-item label="出入时间" prop="accessTime">
                <el-date-picker clearable v-model="obj.accessTime" style="width:300px" type="datetime"  placeholder="请选择"/>
            </el-form-item>
             <el-form-item label="执行说明"  prop="implementationinstructions">
                <el-input clearable v-model="obj.implementationinstructions" style="width:300px" placeholder="请输入" autocomplete="off" />
            </el-form-item>
            <el-form-item label="排放标准"  prop="vehicleEmissions">
               <el-select clearable v-model="obj.vehicleEmissions" style="width:300px" placeholder="请选择">
                  <el-option label="国0" value="国I" />
                  <el-option label="国I" value="国I" />
                  <el-option label="国II" value="国II" />
                  <el-option label="国III" value="国III" />
                  <el-option label="国IV" value="国IV" />
                  <el-option label="国V" value="国V" />
                  <el-option label="国VI" value="国VI" />
                  <el-option label="普通" value="普通" />
                </el-select>
            </el-form-item>
             <el-form-item label="司机" prop="sj_name">
                <el-input clearable v-model="obj.sj_name" style="width:300px" placeholder="请输入"/>
            </el-form-item>
             <el-form-item label="司机电话" prop="sj_phone">
                <el-input clearable v-model="obj.sj_phone"  style="width:300px" placeholder="请输入" />
            </el-form-item>
             <el-form-item label="运输货物" prop="cargo_type">
                <el-input clearable v-model="obj.cargo_type" style="width:300px" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="运输量/吨" prop="cl_huowushuliang">
                <el-input clearable v-model="obj.cl_huowushuliang" style="width:300px" placeholder="请输入"/>
            </el-form-item>
        </el-form>
    </div>
    <template #footer>
        <span class="dialog-footer">
          <el-button class="sele-but" @click="update(obj)"> 确定 </el-button>
          <el-button class="empty-but" @click="updateDialog = false">取消</el-button>
        </span>
      </template>
</el-dialog>
-->
    	      <!-- 导入弹出框 -->
        <el-dialog style="width: 600px" v-model="dialogTableVisible" center title="导入文件">
           <el-upload ref="uploadFile" :file-list="state.fileList" class="upload-demo" action='#' accept=".xls"
              drag :http-request="uploadAction" :on-exceed="handleExceed" :limit="1" :show-file-list="false" :auto-upload="true"
              :before-upload="beforeUpload" style="width: 100%;" >
            <el-icon class="el-icon--upload">
              <upload-filled />
            </el-icon>
            <div class="el-upload__text">
              将文件托到此处或<em>点击导入</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
               <p style="font-size:14px;">支持上传xsl格式文件,如果没有模板
               <a style="text-decoration:none;" href="template/运输车辆备案.xls" download>
               <el-button link  type="primary" size="mini">点击下载</el-button></a>>
              </p>
            </div>
            </template>
          </el-upload>
        </el-dialog>
                <el-dialog v-model="viewphotosDia"  center>
          <div class="photoDiv">
           <img class="photoImg" :src='Image.viewphotos' alt=""/></div>
        </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import { selectPassingRegister,updatePassingRegister,deletePassingRegister,updatePassingRegisterFiling,dleteAllPassingRepair,selectIdPassingVehicles} from "@/api/BasicAccessAudit";
// 文件导入
import { ElMessage, ElMessageBox } from "element-plus";
import * as XLSX from 'xlsx'
import moment from "moment";
import {passingListOut} from "@/api/leadingOut";
import {getCameraInfo} from '@/api/video'
import { v3ImgPreviewFn } from "v3-img-preview";
const router = useRouter()
const tableData = ref([]);
const form = reactive({
})
onMounted(() => {
  selectQuery();
  selectCameraInfo()

});
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const deleteAll = () => {
    if(multipleSelection.value.length == 0){
      ElMessage.error("请选择要删除的数据")
    }else {
      ElMessageBox.confirm("确定要删除吗?").then(()=>{
        dleteAllPassingRepair(multipleSelection.value).then((res) => {
          if (res.code == 200 ){
            ElMessage.success("删除成功")
            selectQuery()
          }else {
            ElMessage.error()
          }
        })
      })
    }
}
// 道闸编号
let getInfo = reactive([
  {getInfoData: []}
])
const selectCameraInfo=()=> {
  getCameraInfo({}).then((res)=>{
    getInfo.getInfoData = res.data
  })
}
const UpdatePage = (row) => {
  router.push({
    path: "/passingUpdate",
    query: { id: JSON.stringify(row.cl_id),}
  });
};

// //查询所有
// const selectAll = () => {
//   selectPassingRegister({pageNum:queryInfo.pagenum,pageSize:queryInfo.pagesize}).then((res) => {
//     if (res.code == 200) {
//       tableData.value = res.data.list;
//       queryInfo.total=res.data.total;
//     } else {
//     }
//   });
// };
//搜索查询
const selectQuery = () => {
  form.pageSize = queryInfo.pagesize
  form.pageNum = queryInfo.pagenum
  if(form.startDateTime) {
    form.startDateTime = moment(form.startDateTime).format('YYYY-MM-DD')
  }
  if(form.endDateTime) {
    form.endDateTime = moment(form.endDateTime).format('YYYY-MM-DD')
  }
  selectPassingRegister(form).then((res) => {
    if (res.code == 200) {
      tableData.value = res.data.list;
      queryInfo.total=res.data.total;
    } else {
    }
  });

};
// 重置
const onReset = () => {
  form.startDateTime = "";
  form.endDateTime = "";
  form.cl_cph ="";
  form.cargo_type = "";
  form.cl_huowushuliang="";
  form.typeOfAcces = "";
  queryInfo.pagenum ='1';
  queryInfo.pagesize='10';
  selectQuery()
};
//删除
const deleteRow = (row) => {
  ElMessageBox.confirm("确定要删除吗?").then((res)=>{
    deletePassingRegister(row).then((res)=>{
      selectQuery()
    })
  })
}
const filingDialog = ref(false)
const filingDialogOne = ref(false)
const formData = reactive({
  register:{
    registerid:"",
    filing:"",
  },
  cl_id:"",
})
const formDataList = reactive({
  register:{
    registerid:"",
    filing:"",
  },
  cl_id:""
})
//横向选择更改备案
const filingStatus = (row) => {
  filingDialogOne.value = true
    formData.cl_id = row.cl_id
    formData.register.registerid = row.register.registerid

}

const filingOne = () => {
  updatePassingRegister(formData).then((res)=>{
    if (res.code == 200) {
      ElMessage.success("备案成功")
      selectQuery()
      filingDialogOne.value = false
    }
  })
}
//查看抓拍照片
const Image = reactive({
  viewphotos:"",
  })
const viewphotosDia = ref(false);
const acclist = (row) => {
  // viewphotosDia.value = true;
  Image.viewphotos = row.viewphotos
  v3ImgPreviewFn(Image.viewphotos)
};
//勾选选择更改备案
// const multipleTableRef = ref()
// const multipleSelection = ref([])
// let arr = []
// const handleSelectionChange = (row) => {
//   arr = []
//   multipleSelection.value = row
//   const newArr = []
//   multipleSelection.value.forEach(item => {
//     if (!newArr.includes(item)) {
//       newArr.push(item)
//     }
//     formData.dataList =[ ...new Set(newArr)]
//   })
//   formData.dataList.forEach((item)=>{
//     let obj ={
//       register:{
//         registerid:"",
//         // filing:"",
//       },
//       cl_id:""
//     }
//     obj.register.registerid = item.register.registerid
//     obj.cl_id = item.cl_id
//     arr.push(obj)
//   })
//   formDataList.value = arr
// }
const rules = {
  typeOfAcces:[{
    required:true,
    message:"请选择出入类型",
    trigger:"change"
  }],
  gateno:[{
    required:true,
    message:"请选择道闸编号",
    trigger:"change"
  }],
    cl_cph :[{
    required:true,
    message:"请填写车牌号",
    trigger:"blur"
  },{
    max:8,
      message: '车牌号最大长度为8位',
      trigger: 'blur'
    }, {
      pattern: /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/,
      message:'请填写正确的车牌号',
      trigger: 'blur'
    }],
  accessTime:[{
    required:true,
    message:"请选择出入时间",
    trigger:"change"
  }],
  // implementationinstructions:[{
  //   required:true,
  //   message:"请输入执行说明",
  //   trigger:"blur"
  // }],
  vehicleEmissions:[{
    required:true,
    message:"请选择排放标准",
    trigger:"change"
  }],
  sj_name:[{
    required:true,
    message:"请输入司机姓名",
    trigger:"blur"
  }],
  sj_phone:[{
    required:true,
    message:"请输入司机电话",
    trigger:"blur"
  }],
  cargo_type:[{
    required:true,
    message:"请输入货物类型",
    trigger:"blur",
  }],
  cl_huowushuliang:[{
    required:true,
    message:"请输入货物量/吨",
    trigger:"blur"
  }]
}
//change事件
const setFiling = (v) => {
  arr.forEach(item=>{
    item.register.filing = v
  })
  formDataList.value = arr
}
const filing = () => {
  // formDataList.register.filing = formData.register.filing
  updatePassingRegisterFiling(formDataList.value).then((res)=>{
    if (res.code == 200) {
      ElMessage.success("备案成功")
      selectQuery()
      filingDialog.value = false
    }
  })
}

//修改
const updateDialog = ref(false)
let obj = reactive({
  cl_cph:"",
  vehicleEmissions:"",
  sj_name:"",
  gateno:"",
  accessTime:"",
  typeOfAcces:"",
  vehicleMessage:{
    sj_phone:"",
    vehicle_id:""
  },
  register:{
    cargo_type:"",
    cl_huowushuliang:"",
    registerid:"",
    // implementationinstructions:""
  }
})
const updateDetail = (row) => {
  updateDialog.value = true
  obj.cl_id = row.cl_id
  obj.typeOfAcces = row.typeOfAcces
  obj.gateno = row.gateno
  obj.vehicle_id = row.vehicleMessage.vehicle_id
  obj.registerid = row.register.registerid
  obj.cl_cph = row.cl_cph
  obj.accessTime = row.accessTime
  // obj.implementationinstructions = row.register.implementationinstructions
  obj.vehicleEmissions = row.vehicleEmissions
  obj.sj_name = row.sj_name
  obj.cargo_type = row.register.cargo_type
  obj.sj_phone = row.vehicleMessage.sj_phone
  obj.cl_huowushuliang = row.register.cl_huowushuliang
}
const ruleFormRef = ref()
const update = (obj) => {
  if(!obj) return
  ruleFormRef.value.validate(valid => {
    if (valid){
      let obj1 = {
        cl_id:obj.cl_id,
        typeOfAcces:obj.typeOfAcces,
        cl_cph:obj.cl_cph,
        vehicleEmissions:obj.vehicleEmissions,
        sj_name:obj.sj_name,
        gateno:obj.gateno,
        vehicleMessage:{
          sj_phone:obj.sj_phone,
          vehicle_id:obj.vehicle_id
        },
        register:{
          cargo_type:obj.cargo_type,
          cl_huowushuliang:obj.cl_huowushuliang,
          registerid:obj.registerid,
          // implementationinstructions:obj.implementationinstructions
        }
      }
      obj1.applicant = localStorage.getItem('number')
      updatePassingRegister(obj1).then((res)=>{
        if (res.code == 200){
          ElMessage.success("修改成功!")
          updateDialog.value = false
          selectQuery()
        }else {
          ElMessage.error("修改失败!")
        }
      })
    }else{
      ElMessage.error("请填写必填项！")
    }
  })
}
//勾选120秒事件
 const checked1 = ref(true)
//导出事件
let table = reactive({
  rows: [],
  total: 0

});

//导出英文(数据库字段)
// const exportExcel = ()=>{
//   const data = XLSX.utils.json_to_sheet(tableData.value)//此处tableData.value为表格的数据
//   const wb = XLSX.utils.book_new()
//   XLSX.utils.book_append_sheet(wb,data,'test-data')//test-data为自定义的sheet表名
//   XLSX.writeFile(wb,'过车记录补登.xlsx')//test.xlsx为自定义的文件名
// }

//导出工序(中文)
const exportExcelData = (form) => {
  ElMessageBox.confirm("确定要导出吗?").then(()=>{
    passingListOut(form).then((res)=>{
      if (res.data.list.length == 0){
        ElMessage.error("未查询到数据")
      }else {
        out.value = res.data.list
        exportExcel()
      }

    })
  })
}
const out = ref()
const exportExcel = () => {

  let exportData = []
  //导出数据结构构造
  out.value.forEach(item => {
    // item.filingStatus = item.filingStatus == '0'?'未补登':'已补登'
    if(item.applicationTime){
      item.applicationTime = moment(item.applicationTime).format('YYYY-MM-DD hh:mm:ss')
    }else{
      item.applicationTime = ''
    }
    exportData.push({
      typeOfAcces: item.typeOfAcces? item.typeOfAcces : '',
      gateno: item.gateno ? item.gateno : '',
      cl_cph: item.cl_cph ? item.cl_cph : '',
      accessTime: item.accessTime ? item.accessTime : '',
      licensePlateColor:item.licensePlateColor ? item.licensePlateColor : '',
      sj_name: item.sj_name ? item.sj_name : '',
      sj_phone: item.sj_phone ? item.sj_phone : '',
      // implementationinstructions: item.register.implementationinstructions ? item.register.implementationinstructions : '',
      vehicleEmissions: item.vehicleEmissions ? item.vehicleEmissions : '',
      cargo_type: item.cargo_type ? item.cargo_type : '',
      cl_huowushuliang: item.cl_huowushuliang ? item.cl_huowushuliang : '',
      applicant: item.applicant ? item.applicant : '',
      applicationTime: item.applicationTime ? item.applicationTime : '',
      // videoAddress: item.videoAddress ? item.videoAddress : '',
      // cameraip: item.cameraip ? item.cameraip : '',
      viewphotos: item.viewphotos ? item.viewphotos : '',

    })
  })
  //导出表头设计
  let head = {
    // filingStatus:'补登状态',
    typeOfAcces: '出入类型',
    gateno: '道闸编号',
    cl_cph: '车牌号',
    licensePlateColor:'车牌颜色',
    accessTime: '出入时间',
    sj_name:'司机',
    sj_phone:'司机电话',
    // implementationinstructions:'执行说明',
    applicant:'申请人',
    // applicationTime:'申请时间',
    videoAddress:'视频地址',
    // cameraip:'摄像头IP地址',
    viewphotos:'抓拍照片',
    vehicleEmissions: '排放标准',
    cargo_type:'运输货物',
    cl_huowushuliang:'运输量/吨'
  }
  //表头数据切换
  const list = exportData.map(item => {
    const obj = {}
    for (const k in item) {
      if (head[k]) {
        obj[head[k]] = item[k]
      }
    }
    return obj
  })
  // 创建工作表
  const data = XLSX.utils.json_to_sheet(list)
  // 创建工作簿
  const wb = XLSX.utils.book_new()
  // 将工作表放入工作簿中
  XLSX.utils.book_append_sheet(wb, data, 'data')
  // 生成文件并下载
  XLSX.writeFile(wb, '过车记录补登.xlsx')

}

//导入事件
const dialogTableVisible = ref(false);
const state = reactive({
  bannerUrl: '',
  fileList: [],
  fileName: '',
})

const handleExceed = (files, fileList) => {
  if (state.fileList.length >= 1) {
    ElMessage.error('只能上传一个图片')
    return;
  }
}

const beforeUpload = (file) => {
  // const type = ['image/jpeg', 'image/jpg', 'image/png']
  const type = ['application/vnd.ms-excel']
  if (type.indexOf(file.type) === -1) {
    // ElMessage.error('上传的文件必须是JPG、JPEG、PNG三种之一!')
    ElMessage.error('上传的文件必须是xsl')
    return false
  } else if (file.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
}

const uploadAction = (option) => {
  console.log('走到uploadAction')
  let param = new FormData();
  param.append('multipartFile', option.file);
  uploadExcel(param).then((res) => {
    if (res && res.code === 200) {
      state.fileList = []
      dialogTableVisible.value = false
      ElMessage.success('上传成功！');
      selectQuery()
    }else {
      ElMessage.error('上传失败,请重试');
    }
  })
}
//分页
const queryInfo = reactive({
  pagenum:1,
  pagesize:10,
  total:0
})
const handleSizeChange = (val) => {
  queryInfo.pagesize = val
  selectQuery()
}
//点击第几页
const handleCurrentChange = (val) => {
  queryInfo.pagenum = val
  selectQuery()
}

</script>

<style scoped>
/* 面包屑字体颜色更改 */

.breadcrumbColor >>> .el-breadcrumb__inner {
  color: #000;
}
/* 内部header */

.inside-header {
  height: 20px;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  background:#f2f4f5
}
/* 实心按钮背景样式 */

.sele-but {
  background: #3780b9;
  border: 0px;
  border-radius: 2px;
  color: white;
}
/* 空心按钮样式 */

.empty-but {
  border: 1px solid #3780b9;
  color: #3780b9;
}
/*新增按钮样式*/
.add-but {
  background: #dde5fe;
  color: #3780b9;
}
/*照片弹窗及图片样式*/
.photoImg{
  vertical-align: middle;width:500px;height:400px;margin:auto
}
.photoDiv{
  width:100%;display:flex
}

</style>
